<template>
    <div class="contion">
        <div class="order">
            <div class="order_1">
                <div>
                    <van-icon name="arrow-left" size="20" @click="back()" style="margin-left:20px"/>
                </div>
                <span style="margin-left:220px"><b>订单详情</b></span>
            </div>
            <div class="order_2" v-for="(j,k) in orderlist" :key="k">
                <div class="order_2_1">
                    <span>订单编号：{{ j.order_id }}</span>
                    <span>下单时间：{{ j.pay_time }}</span>
                </div>
                <div class="order_2_2">
                    <img :src="detalist.shoes_img" style="width: 150px;height:150px;margin-right:20px">
                    <div>
                        <span>{{ detalist.shoes_name }}</span>
                        <div style="margin-bottom:20px;margin-top:20px">
                            <span style="margin-right:150px;">{{ detalist.shoes_price }}</span>
                            <span>数量：1</span>
                        </div>
                        <span>已付款</span>
                    </div>
                </div>
                <div class="order_2_3">
                    <el-button @click="orderdeta">查看详情</el-button>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'
import { de } from "element-plus/es/locales.mjs"

const router = useRouter()

const back = () =>{
    router.back();
}

const user = localStorage.getItem('userid')

let orderlist = ref([])

const getOrder = () =>{
    axios.get(`http://127.0.0.1:8000/home/orderlist/?user=${user}`).then(res=>{
        localStorage.setItem('order',res.data.data[0].id)
        // console.log(res.data.data[0].id)
        orderlist.value = res.data.data
    })
}

const order = localStorage.getItem('order')

let detalist = ref([])

const getOrderDeta = () =>{
    axios.get(`http://127.0.0.1:8000/home/orderdeta/?order=${order}`).then(res=>{
        detalist.value = res.data.data
    })
}

const orderdeta = () =>{
    router.push('/order2')
}

onMounted(()=>{
    getOrder()
    getOrderDeta()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.order{
    width: 600px;
    height: auto;
    background-color: #F7F7F7F7;
}

.order_1{
    padding-top: 20px;
    padding-bottom: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    background-color: #FFFFFF;
    border: #FFFFFF solid 0px;
    text-align: center;
    font-size:25px;
    display: flex;
    flex-direction: row;
}

.order_2{
    background-color: #FFFFFF;
    margin-bottom: 570px;
}

.order_2_1{
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-top: 30px;
    margin-left: 20px;
}

.order_2_2{
    display: flex;
    flex-direction: row;
    font-size: 18px;
    margin-left: 20px;
}

.order_2_3 button{
    width:200px;
    height: 40px;
    background-color: #9F9E9A1A;
    border:0px;
    border-radius: 5px;
    color:#1A1A1A;
    margin-left: 180px;
    margin-top: 40px;
    margin-bottom: 20px;
}
</style>